<template>
  <div class="step_content">
    <a-form :form="form">
      <div class="step_header">忘记密码</div>
      <div class="step_input">
        <a-form-item>
          <a-input
            v-decorator="[
              'mobile',
              {
                rules: [
                  { required: true, message: '请输入您的手机号' },
                  {
                    validator: (rule, value, callback) => {
                      value = value || ''
                      if (value !== '') {
                        if (!value.toString().match(regPhone)) {
                          callback('请输入正确联系方式')
                        }
                      }
                      callback()
                    }
                  }
                ],
                validateTrigger: ['change', 'blur']
              }
            ]"
            type="text"
            placeholder="请输入您的手机号"
            autocomplete="off"
          >
          </a-input>
        </a-form-item>
      </div>
      <div class="captcha_input">
        <a-form-item>
          <a-input
            v-decorator="['verification', { rules: [{ required: true, message: '请输入验证码' }] }]"
            type="text"
            placeholder="请输入验证码"
            class="verification"
            autocomplete="off"
          >
          </a-input>
        </a-form-item>
        <img :src="'data:image/png;base64,' + captchaImg" alt="" class="verificationImg" />
      </div>
      <div>
        <a-button type="primary" class="button_center" @click="nextStep">下一步</a-button>
      </div>
    </a-form>
  </div>
</template>

<script>
import { captcha } from '@/api/login'
import { checkPhoneCaptcha } from '@/api/login'
export default {
  name: 'StepCaptcha1',
  data() {
    return {
      captchaImg: null,
      uuid: '',
      regPhone: new RegExp(/^1([38]\d|5[0-35-9]|7[3678])\d{8}$/),
      form: this.$form.createForm(this)
    }
  },
  created() {
    captcha({})
      .then(response => {
        this.captchaImg = response.data.captcha || null
        this.uuid = response.data.uuid || ''
      })
      .catch(function(error) {
        console.log(error)
      })
  },
  methods: {
    nextStep() {
      const {
        form: { validateFields }
      } = this
      // 先校验，通过表单校验后，才进入下一步
      validateFields((err, values) => {
        if (!err) {
          const params = {}
          params.mobile = values.mobile || null
          params.verCode = values.verification || null
          params.uuid = this.mobile || null
          checkPhoneCaptcha({ ...params })
            .then(response => {
              if (response.data) {
                this.$emit('commitPhone', values.mobile)
                this.$emit('nextStep')
              }
            })
            .catch(function(error) {
              this.$error('接口出错', error)
            })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.step_content {
  width: 420px;
  height: 333px;
  background-color: #feffff;
  box-shadow: 2px 1px 18px -2px #e0ecff;
  border-radius: 1px;
  text-align: center;
  .step_header {
    margin: 45px 112px 30px 112px;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #333333;
  }
  .step_input {
    width: 320px;
    margin: 0 auto;
    margin-bottom: 12px;
  }
  .captcha_input {
    width: 320px;
    margin: 0 auto;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    .verification {
      width: 220px;
    }
    .verificationImg {
      width: 88px;
      height: 42px;
      margin: 0 0 0 12px;
    }
  }
  .ant-input {
    height: 42px;
    padding: 0 10px;
    font-size: 14px;
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  .button_center {
    width: 320px;
    height: 48px;
    background-color: #33b0ed;
    border-radius: 2px;
  }
  /deep/ .ant-form-explain {
    text-align: left;
  }
}
</style>
